<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>
        修改密码
    </title>

    <link rel="stylesheet" href="/common/js/bootstrap-3.0.0/css/bootstrap-united.min.css" type="text/css">
    <link rel="stylesheet" href="/common/js/jquery-plugin/validate/style.css" type="text/css">
</head>
<body>
<div class="container">
    <form id="passwordForm" method="post" class="form-horizontal" style="padding-top: 20px;">
        <fieldset>
            <legend>
                修改密码
            </legend>

            <div class="form-group">
                <label class="col-md-2 control-label" for="oldPassword">原始密码:</label>

                <div class="col-md-4">
                    <input type="password" id="oldPassword" class="form-control" name="oldPassword"
                           required="required">
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label" for="newPassword">新密码:</label>

                <div class="col-md-4">
                    <input type="password" id="newPassword" class="form-control" name="newPassword"
                           required="required">
                </div>
            </div>

            <div class="form-group">
                <label class="col-md-2 control-label" for="newPassword2">再次输入新密码:</label>

                <div class="col-md-4">
                    <input type="password" id="newPassword2" class="form-control" name="newPassword2"
                           required="required">
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-4">
                    <button class="btn btn-primary" type="submit">保存</button>
                    <button class="btn btn-info" type="reset">重置</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>
<script type="text/javascript" src="/common/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/common/js/jquery-plugin/validate/jquery.validate.1.11.1.min.js"></script>
<script type="text/javascript" src="/common/js/jquery.md5.js"></script>
<script type="text/javascript">
    $(function () {
        $.validator.setDefaults({
            submitHandler: function (form) {
                if (form.id == 'passwordForm') {
                    changePassword();
                }
            }
        });

        $("#passwordForm").validate({
            rules: {
                oldPassword: {
                    required: true,
                    rangelength: [6, 16]
                },
                newPassword: {
                    required: true,
                    rangelength: [6, 16]
                },
                newPassword2: {
                    required: true,
                    rangelength: [6, 16],
                    equalTo: '#newPassword'
                }
            },
            messages: {
                oldPassword: {
                    required: "请输入原始密码",
                    rangelength: "长度必须介于{0} 和 {1} 之间的字符串"
                },
                newPassword: {
                    required: "请输入新密码",
                    rangelength: "长度必须介于{0} 和 {1} 之间的字符串"
                },
                newPassword2: {
                    required: "请再次输入新密码",
                    rangelength: "长度必须介于{0} 和 {1} 之间的字符串",
                    equalTo: '两次新密码不一致'
                }
            },
            highlight: function (element) {
//                $(element).next("label.valid").remove();
                $(element).closest('.form-group').removeClass('success').addClass('error');
            },
            unhighlight: function (element) {
//                if ($(element).next("label.valid").length == 0) {
//                    $(element).after("<label class='valid'/>");
//                }
                $(element).closest('.form-group').removeClass('error').addClass('success');
            }
        });
    });

    function changePassword() {
        var oldPassword = $.md5($("#oldPassword").val());
        var newPassword = $.md5($("#newPassword").val());
        $.ajax({
            type: "post",
            url: '/user/updatePassword.json',
            data: {
                oldPassword: oldPassword,
                newPassword: newPassword
            },
            success: function (data) {
                $("#passwordForm div.alert").remove();
                if (data.success == 'SUCCESS') {
                    var div = $("<div></div>").addClass("alert alert-success fade in");
                    $('<button class="close" aria-hidden="true" data-dismiss="alert" type="button">×</button>').appendTo(div);
                    $('<p></p>').html(data.msg).appendTo(div);
                    $("#passwordForm .form-group:first").before(div);
                    $("#passwordForm")[0].reset();
                } else {
                    var div = $("<div></div>").addClass("alert alert-warning fade in");
                    $('<button class="close" aria-hidden="true" data-dismiss="alert" type="button">×</button>').appendTo(div);
                    $('<p></p>').html(data.msg).appendTo(div);
                    $("#passwordForm .form-group:first").before(div);
                }
            }
        });
    }
</script>
</body>
</html>